<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Proxy</title>
</head>

<body>
    <div id="app"></div>
</body>
<script type="module">
    import { reactive, effect } from './vue3-proxy.js'
    const product = reactive({
        name: 'iphone',
        price: 1000,
        count: 1
    });
    let total = 0;
    effect(() => {
        console.log(`${product.name}的价格是${product.price}`);
        total = product.count * product.price;
    });
    console.log('total:', total);

    product.price = 2000;
    console.log('total:', total);

    product.count = 2;
    console.log('total:', total);


</script>

</html>